<%--
  Created by IntelliJ IDEA.
  User: Mr.G
  Date: 2018/12/29
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
    <link rel="stylesheet" href="${path}/assets/css/metroStyle/metroStyle.css">
    <script src="${path}/assets/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div class="layui-fluid">
<h2>角色管理</h2>
<hr>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称：</label>
            <div class="layui-input-inline">
                <input type="text" id="rolelabel" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="reloadData();"><i class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
    </div>
</form>
    <div class="layui-row">
        <div class="layui-col-sm8">
            <table id="roleTable" lay-filter="roleTable"></table>
        </div>
        <div class="layui-col-sm4" style="padding: 10px;">
            <ul id="treeDemo" class="ztree"></ul>
            <button class="layui-btn layui-btn-fluid" onclick="assignPers()">授权</button>
        </div>
    </div>

<script>
    /*ztree*/
    //授权

    layui.config({
        base: '${path}/assets/layui/lay/modules/'
    }).extend({
        notice : 'notice'
    })

    function assignPers() {
        //    获取选中的节点
        var nodes = zTreeObj.getCheckedNodes(true);

        var str = "";
        $.each(nodes,function () {
            str += this.menuid + ","
        })

        str = str.substring(0,str.length - 1);

        $.post("${path}/role/assignPers",{roleId:roleId,perIds:str},function () {
            // layer.msg("授权成功",{icon:6})
            layui.notice.init({
                type: "default",
                autoClose: true,
                title: "授权成功！"
            });
        })
    }
    //选择点选框右侧权限列表选中
    function loadPerTree(roleid) {
        $.get("${path}/menuforon/rolePers",{roleId: roleid},function (data) {
            /*获取所有的节点*/
            var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            $.each(nodes,function () {
                if ($.inArray(this.menuid,data) != -1) {
                    zTreeObj.checkNode(this,true,true)
                }else{
                    zTreeObj.checkNode(this,false,true)
                }
            })
        })
    }
    
    var zTreeObj;
    var roleId; //角色编号
    var setting = {
        check: {
            enable: true
        },
        data: {
            key: {
                name: "menuname"
            }
        }
    };
    $.get("${path}/menuforon/jibie",function (data) {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
    })



    /**/
    function reloadData(){
        layui.table.reload("roleTable",{
            page:{
                curr : 1
            },
            where : {
                rolelabel : $("#rolelabel").val()
        }
        })
    }

    layui.use(['table','form','notice'],function () {
        var table= layui.table;
        var form = layui.form;
        var notice = layui.notice;
        //渲染表格
        table.render({
            elem: '#roleTable',
            url: '${path}/role/list',
            page:true,
            even: true,
            toolbar:'#toolbarDemo',
            cols:[[
                {type:'radio'},
                {field:'roleid',title:'标号'},
                {field:'rolename',title:'角色名称'},
                {field:'rolelabel',title:'名称'},
                {field:'hello', title:'操作',toolbar:'#barDemo'}
            ]]
        })


        //监听单选框选中事件
        table.on('radio(roleTable)',function (obj) {
            roleId = obj.data.roleid;
            loadPerTree(roleId);

        })

        /*头部监听事件*/
        table.on('toolbar(roleTable)',function (obj) {
            var e = obj.event;
            switch (e) {
                case 'add':
                    $.get("${path}/role/form",function (str) {
                        var index = layer.open({
                            type: 1,
                            title:"添加角色",
                            content: str,
                            area: '800px',
                            maxmin: true,
                            btn:['确定','取消'],
                            yes:function (index) {
                                var params = $("#add_role_form").serialize();
                                $.post('${path}/role/add',params,function () {
                                    table.reload('roleTable');
                                    layer.close(index);
                                })
                            }
                        });
                    })
                    break;
            }
        })

        table.on("tool(roleTable)",function (obj) {
            var data = obj.data;
            var e = obj.event;
            if (e == "edit"){
                $.get("${path}/role/form",function (str) {
                    $.get('${path}/role/view',{roleid:data.roleid},function (data) {
                    var index = layer.open({
                        type: 1,
                        title:"修改角色",
                        content: str,
                        area: '800px',
                        maxmin: true,
                        btn:['确定','取消'],
                        success:function(){
                            form.val('roleForm',data);
                        },
                       yes:function (index) {
                            var params=$('#add_role_form').serialize();
                            console.log(params)
                            $.post('${path}/role/edit',params,function () {
                                table.reload("roleTable")
                                layer.close(index);
                                layer.msg("修改成功",function () {

                                })
                            })
                        }
                    });
                    })
                })
            }else if (e == "del"){
                layer.open({
                    title: "友情提示",
                    content:"你确定删除吗?",
                    btn:['确定','取消'],
                    yes:function () {
                        $.post("${path}/role/batchDelete",{ids:data.roleid},function () {
                            layer.msg("删除成功了");
                            table.reload('roleTable');
                        });
                    }
                })
            }
        })
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> </a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
</div>
</body>
</html>
